/*
 * @Author: tomystery 
 * @Date: 2018-06-04 16:54:07 
 * @Last Modified by: t
 * @Last Modified time: 2018-07-11 17:19:01
 * @filename:product/category-selector
 */
import React from 'react'
import './category-selector.scss'
import MUtil from 'util/mm.jsx';
import Product from 'service/product-service.jsx';

const _mm = new MUtil();
const _product = new Product();

class CategorySelector extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            firstCategoryId: 0,
            firstCategoryList: [],
            secondCategoryList: [],
            secondCategoryId: 0
        }
    }


    componentDidMount() {
        this.loadFirstCategory()
    }
    componentWillReceiveProps(nextProps) {
        let categoryIdChange = this.props.categoryId !== nextProps.categoryId,
            parentCategoryIdChange = this.props.parentCategoryId !== nextProps.parentCategoryId;

        //数据没有发生变化时不做处理
        if (!categoryIdChange && !parentCategoryIdChange) {
            return;
        }

        //假如只有一级品类
        if (nextProps.parentCategoryId === 0) {
            this.setState({
                firstCategoryId: nextProps.categoryId,
                secondCategoryId: 0
            })
        }

        //有两级品类
        else {
            this.setState({
                firstCategoryId: nextProps.parentCategoryId,
                secondCategoryId: nextProps.categoryId
            }, () => {
                parentCategoryIdChange && this.loadSecondCategory();
            })
        }
    }
    //加载第一级的分类
    loadFirstCategory() {
        let listParam = {};
        listParam.categoryId = this.state.firstCategoryId;
        _product.getFirstCategory(listParam).then(res => {
            this.setState({

                firstCategoryList: res
            })
        }, errMsg => {
            _mm.errTips(errMsg);
        })
    }

    //点击切换一级分类
    onFirstCategoryChange(e) {
        if(this.props.readOnly){
            return 
        }
        if (e.target.value) {
            this.setState({
                firstCategoryId: e.target.value || 0
            }, () => {
                //更新二级品类
                this.loadSecondCategory()
                this.onPropsCategoryChange()
            })
        }
    }
    //加载二级分类
    loadSecondCategory() {
        let listParam = {};
        listParam.categoryId = this.state.firstCategoryId;
        _product.getFirstCategory(listParam).then(res => {

            this.setState({

                secondCategoryList: res
            })


        }, errMsg => {
            _mm.errTips(errMsg);
        })
    }

    //点击切换二级分类
    onSecondCategoryChange(e) {
        if(this.props.readOnly){
            return 
        }
        this.setState({
            secondCategoryId: e.target.value || 0
        },()=>{
            this.onPropsCategoryChange();
        })
    }

    //传给父组件选中的结果
    onPropsCategoryChange(){
        //判断props里面的回调函数存在
        let categoryChangeable=typeof this.props.onCategoryChange==='function';
        //如果有二级品类
        if(this.state.secondCategoryId){
            categoryChangeable && this.props.onCategoryChange(this.state.secondCategoryId,this.state.firstCategoryId);
        }
        //如果只有一级品类
        else{
            categoryChangeable && this.props.onCategoryChange(this.state.firstCategoryId,0);
        }
    }
    render() {
        const {firstCategoryId,secondCategoryId}=this.state

        return (
            <div className="col-sm-10">
                <select className='form-control cate-select' value={firstCategoryId} onChange={(e) => this.onFirstCategoryChange(e)} readOnly={this.props.readOnly} >
                    <option id='0'>请选择一级分类</option>
                    {this.state.firstCategoryList.map((item, index) => (
                        <option value={item.id} key={index}>{item.name}</option>
                    ))}
                </select>
                {this.state.secondCategoryList && this.state.secondCategoryList.length ?
                    <select className='form-control cate-select' value={secondCategoryId} onChange={(e) => this.onSecondCategoryChange(e)} readOnly={this.props.readOnly}>
                        <option value='0'>请选择二级分类</option>
                        {this.state.secondCategoryList.map((item, index) => (
                            <option value={item.id} key={index}>{item.name}</option>
                        ))}
                    </select>
                    :
                    null}
            </div>

        )
    }
}

export default CategorySelector